<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>壹码当先 - 作品展示</title>
    <link href="/pages/css/kefu.css" rel="stylesheet">
    <script type="text/javascript" src="/pages/js/jquery001.js"></script>
    <!-- Chosen CSS -->
    <link href="/pages/css/login-register.css" rel="stylesheet">
    <!-- Pretty Photo CSS -->
    <link href="/pages/css/prettyPhoto.css" rel="stylesheet">

    <!-- Chosen CSS -->
    <link href="/pages/css/chosen.min.css" rel="stylesheet">
    <!-- Custom Main StyleSheet CSS -->
    <link href="/pages/style.css" rel="stylesheet">
    <!-- Color CSS -->
    <link href="/pages/css/color.css" rel="stylesheet">
    <link href="/pages/css/color-2.css" rel="stylesheet">
    <!-- Responsive CSS -->
    <link href="/pages/css/responsive.css" rel="stylesheet">

    <script type="text/javascript" src="/pages/js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            loadProducts();
        })


        //加载作品列表
        function loadProducts() {
            var url = '/product/show';
            $.post(url, {}, function (result) {
                if ((!result.hasOwnProperty('status'))) {
                    if (result.result.length > 0) {
                        var html = '';
                        var start = '<div class="row">';
                        var end = '</div>';
                        var products = result.result;
                        html += start;
                        for (var i = 0; i < products.length; i++) {
                            html += '<div class="col-md-3 col-sm-6">' +
                                    '<div class="gt_event_grid default_width mb30">' +
                                    '<figure>' +
                                    '<img src="' + products[i].sbimage + '" alt="">' +
                                    '<figcaption class="gt_event_grid_date">' +
                                    '01<span>July</span>' +
                                    '</figcaption>' +
                                    '</figure>' +
                                    '<div class="gt_event_grid_des default_width">' +
                                    '<h6>' + products[i].name + '</h6>' +
                                    '<ul class="gt_event_meta">' +
                                    '<li><i class="fa fa-map-marker"></i>作者：' + products[i].author + '</li>' +
                                    '</ul>' +
                                    '<p>简介：' + products[i].introduction + '</p>' +
                                    '<a href="javascript:void(0);" onclick="detail(' + products[i].id + ')">查看详情</a>' +
                                    '</div>' +
                                    '</div>' +
                                    '</div>';
                        }
                        html += end;
                        $("#products").html(html);
                    }
                }
            });
        }


        //查看作品详情
        function detail(id) {
            localStorage['productId'] = id;
            window.location.href = "/pages/ymdx/showpages/showworks_detail.html";
        }

    </script>

</head>

<body onload="IFrameResize()">

<script type="text/javascript">
    function IFrameResize() {
        //alert(this.document.body.scrollHeight); //弹出当前页面的高度
        var obj = parent.document.getElementById("iframe1");  //取得父页面IFrame对象
        //alert(obj.height); //弹出父页面中IFrame中设置的高度
        obj.height = this.document.body.scrollHeight;  //调整父页面中IFrame的高度为此页面的高度
    }
</script>

<!--Sub Banner Wrap Start -->
<div class="gt_sub_banner_bg default_width">
    <div class="container">
        <div class="gt_sub_banner_hdg  default_width">
            <h2>作品展示</h2>
            <h6>壹码当先&nbsp;·&nbsp;让更多的孩子爱上编程</h6>
        </div>
    </div>
</div>
<!--Sub Banner Wrap End -->
<!--Breadcrumb Wrap End -->
<div class="gt_breadcrumb_bg default_width">
    <div class="container">
        <div class="gt_breadcrumb_wrap default_width">
            <ul>
                <li><a href="/pages/index.html">首页</a></li>
                <li><a href="/pages/ymdx/course/course.html">作品展示</a></li>
            </ul>
        </div>
    </div>
</div>
<!--Breadcrumb Wrap End -->

<!--show student work-->
<div class="gt_content_wrap">
    <!--Event Grid Wrap Start-->
    <section class="gt_courses_bg">
        <div class="container">
            <div id="products" class="row">

            </div>
        </div>
    </section>
    <!--Event Grid Wrap End-->
</div>
<!--show student work-->

<!--Jquery Library-->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<!--Bootstrap core JavaScript-->
<script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
<!--Chosen JavaScript-->
<script src="/pages/js/chosen.jquery.min.js"></script>
<!--Custom JavaScript-->
<script src="/pages/js/custom.js"></script>

</body>
</html>
